<template>
  <div class="title-item">
    <!-- :style="{ height: showAreaMaxHeight + 'px' }" -->
    <p v-if="moduleItemData.name && (getTitleStyle() && !getTitleStyle().isHide)" :style="getTitleStyle()" class="item-header">{{ moduleItemData.name }}<tipIcon v-if="RemarkOptions.showRemark && RemarkOptions.value" :content="RemarkOptions.value" class="ml4"/></p>
    <p v-if="titleName && (getTitleContentStyle() && !getTitleContentStyle().isHide)" :style="titleStyle === 'center' ? {...vertical, ...getTitleContentStyle()} : {...getTitleContentStyle(), textAlign: titleStyle}" class="title-name">
      {{ titleName }}
    </p>
  </div>
</template>
<script>
export default {
  name: 'TitleItem',
  props: {
    // showAreaMaxHeight: {
    //   type: Number,
    //   default: 100
    // },
    // 全局的样式，修改标题边距
    chartConfig: {
      type: Object,
      default: () => {
        return {};
      }
    },
    moduleItemData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      vertical: {
        transform: 'translate(-50%, -50%)',
        left: '50%',
        width: '100%',
        textAlign: 'center'
      }
    };
  },
  computed: {
    styleConfig() {
      return this.moduleItemData.styleConfig;
    },
    titleName() {
      return this.moduleItemData.titleName;
    },
    titleStyle() {
      return this.moduleItemData.titleStyle;
    },
    RemarkOptions() {
      return (this.getTitleStyle() && this.getTitleStyle().RemarkOptions) || {};
    }
  },
  methods: {
    /**
     * 自定义样式
     */
    getTitleStyle() {
      const styleConfig = this.styleConfig;
      if (styleConfig && styleConfig instanceof Array) {
        // 兼容旧数据
        return this.moduleTitleSy();
      } else if (styleConfig && styleConfig instanceof Object) {
        let styleObj = {};
        styleObj = { ...styleConfig.moduleName };
        styleObj.lineHeight = styleObj.fontSize = styleObj.fontSize + 'px'; // 避免字体造成高度计算错误
        styleObj.marginBottom = this.chartConfig.modulePadding ? this.chartConfig.modulePadding + 'px' : '12px';
        if (styleObj.FontStyle && styleObj.FontStyle instanceof Array) {
          if (styleObj.FontStyle.includes('italic')) styleObj.fontStyle = 'italic';
          if (!styleObj.FontStyle.includes('bolder')) styleObj.fontWeight = 'normal';
        }
        return styleObj;
      } else {
        return {};
      }
    },
    getTitleContentStyle() {
      const styleConfig = this.styleConfig;
      if (styleConfig && styleConfig instanceof Array) {
        // 兼容旧数据
        return this.moduleTitle();
      } else if (styleConfig && styleConfig instanceof Object) {
        let styleObj = {};
        styleObj = { ...styleConfig.titleContent };
        styleObj.lineHeight = styleObj.fontSize = styleObj.fontSize + 'px'; // 避免字体造成高度计算错误
        return styleObj;
      } else {
        return {};
      }
    },
    moduleTitleSy() {
      const moduleTitleStyle = {};
      this.styleConfig.map(item => {
        if (item.title === '模块名称：') {
          item.config.forEach(val => {
            if (val.word === 'fontSize' && val.unit) {
              if (val.value.toString().indexOf('px') === -1) {
                val.value = `${val.value}${val.unit}`;
              }
            }
            moduleTitleStyle[val.word] = val.value;
          });
        }
      });
      return moduleTitleStyle;
    },
    moduleTitle() {
      const styleObj = {};
      this.styleConfig.map(item => {
        if (item.title === '标题文字：') {
          item.config.forEach(val => {
            if (val.word === 'fontSize' && val.unit) {
              if (val.value.toString().indexOf('px') === -1) {
                val.value = `${val.value}${val.unit}`;
              }
            }
            styleObj[val.word] = val.value;
          });
        }
      });
      return styleObj;
    }
  }
};
</script>
<style lang="scss" scoped>
.title-item {
  position: relative;
  height: 100%;
  .item-header {
    font-size: 20px;
    font-weight: bolder;
    color: rgba(153, 153, 153, 1);
    // padding: 0 8px;
    margin: 0 0 12px;
    // border-left: 4px solid rgba(64, 110, 255, 1);
  }
  .title-name {
    width: 100%;
    position: absolute;
    top: 50%;
    margin: 0;
  }
  .item-value {
    font-size: 32px;
    font-weight: 500;
    min-height: 55px;
    color: rgba(51, 51, 51, 1);
    margin: 15px 0 0;
  }
}
</style>
